<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="项目详情"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <table class="table table-borderless table-dl" v-loading="loading">
      <colgroup>
        <col width="15%" />
        <col width="35%" />
        <col width="15%" />
        <col width="35%" />
      </colgroup>
      <tbody>
        <tr>
          <td>项目名称：</td>
          <td>{{ project.customer_name }}</td>
          <td>负责人名称：</td>
          <td>{{ project.corp_name }}</td>
        </tr>
        <tr>
          <td>放款时间：</td>
          <td>{{ loadDate }}</td>
          <td>结束时间：</td>
          <td>{{ loadEndDate }}</td>
        </tr>
        <tr>
          <td>在保余额：</td>
          <td>{{ project.left_funds }}万元</td>
          <td>联系电话：</td>
          <td>{{ project.mobile_no }}</td>
        </tr>
      </tbody>
    </table>
  </el-dialog>
</template>

<script>
import { formatToDay } from '@/common/plugins/tools/date'

export default {
  components: {},
  props: {
    visible: Boolean,
    relatedId: String,
  },
  data() {
    return {
      loading: false,
      project: {},
    }
  },
  computed: {
    loadDate() {
      return formatToDay(this.project.load_date)
    },
    loadEndDate() {
      return formatToDay(this.project.load_end_date)
    },
  },
  watch: {
    visible: {
      handler: function (val) {
        val && this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.relatedId) return

      this.loading = true
      this.$api
        .getData({
          table: 'customer_related',
          params: {
            'customer_related_id.eq': this.relatedId,
            fields: [
              'customer_name',
              'corp_name',
              'load_date',
              'load_end_date',
              'left_funds',
              'mobile_no',
            ],
          },
        })
        .then(res => {
          this.project = (res.data || [])[0] || {}
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.table-dl {
  td:nth-child(2n + 1) {
    text-align: right;
  }
}
</style>
